<template>
    <component :is="cmpnt.cmpnt" :key="cmpnt.id" v-bind="cmpnt.props" v-on="cmpnt.events" v-model="data[cmpnt.valueKey]"
        :meta="{ mdata: data[cmpnt.valueKey], pdata: data, cmpnt: cmpnt }" :ref="setCmpntRef"
        :class="[cmpnt.props.class, ((parent?.props?.childrenClass || {})[cmpnt.category])]" :style="cmpnt.props.style">
        <template v-if="cmpnt.children && (cmpnt.children as any[] || []).length > 0">
            <draggable v-if="$data.store.conf.editable" handle=".move" v-model="cmpnt.children as any[]"
                ghost-class="drag-ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
                :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50">
                <transition-group>
                    <cmpnt-renders :cmpnts="cmpnt.children as any[]" :data="data[cmpnt.valueKey]" :parent="cmpnt" />
                </transition-group>
            </draggable>
            <div v-else>
                <cmpnt-renders :cmpnts="cmpnt.children as any[]" :data="data[cmpnt.valueKey]" :parent="cmpnt" />
            </div>
        </template>
        <template v-if="cmpnt.props.innerText">
            {{ cmpnt.props.innerText }}
        </template>
        <template v-for="(value, name) in cmpnt.slot" :key="name" #[name]="scope">
            <cmpnt-renders :cmpnts="value" :data="scope" :parent="cmpnt" />
        </template>
    </component>
</template>

<script setup lang="ts">
import cmpntRenders from "./cmpntRenders.vue";
import { VueDraggableNext as Draggable } from "vue-draggable-next";
import { defineProps, reactive, ref } from 'vue'
import $data from "xcore/data";
import { ICmpnt, isBars, isWidget } from "xcore/cmpnt";

interface Props {
    cmpnt: ICmpnt;
    parent?: any;
    data?: any;
}

const props = defineProps<Props>();
props.cmpnt._ref = ref(null)
const setCmpntRef = (el: any) => {
    $data.store.page?.meta?.setRef(props.cmpnt.id, el)
}

const localData = reactive(props.data);
const valueKey = props.cmpnt.valueKey;
if (localData && valueKey
    && !localData[valueKey]
    && !isWidget(props.cmpnt) && !isBars(props.cmpnt)) {
    localData[valueKey] = {};
}
</script>

<!--.el-radio-group .el-checkbox-group 处理对不齐的情况，原因未知 -->
<style scoped>
:deep(.el-checkbox-group) {
    font-size: inherit;
    line-height: inherit;
}

:deep(.el-radio-group) {
    font-size: inherit;
    line-height: inherit;
}
</style>